<template>
  <div class="logincentet">
    <div class="login">
      <div class="login_top">
        <div class="image_login">
          <img src="img/logo.png" class="logo" />
        </div>

        <div class="header">
          <h1 class="title">
            <span>太空环境</span><span>大数据治理应用软件</span>
          </h1>
        </div>
      </div>
      <div class="login_bottom">
        <div class="body">
          <div class="form">
            <div class="form-item">
              <label for="" class="user">用户名</label>
              <input type="text" v-model="userName" placeholder="" />
            </div>
            <div class="form-item">
              <label for="" class="pass">秘&nbsp;&nbsp;&nbsp;码</label>
              <input type="password" v-model="password" placeholder="" />
            </div>
            <div class="form-item">
              <button class="submit" @click="loginSubmit"><b>登 录</b></button>
              <!--           <button @click="RSAjiami">加密</button>-->
              <!--           <button @click="RSAiemi">解密</button>-->
            </div>
          </div>
          <br />
          <div class="userMessage"><span v-text="userMessage"></span></div>
          <div class="passwordMessage"><span v-text="pwMessage"></span></div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import { post } from "../utils/request";
export default {
  name: "LoginPage",
  data() {
    return {
      userName: "",
      password: "",
      userMessage: "",
      pwMessage: "",
      encrypted: null,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {},
    loginSubmit: function () {
      var that = this;
      that.userMessage = "";
      that.pwMessage = "";
      // this.RSAjiami()
      // this.RSAiemi()
      var params = {
        username: this.userName,
        password: this.password,
      };
      if (that.userName == "") {
        that.userMessage = "请输入账号";
        //console.log(that.userMessage)
        return;
      }
      if (that.password == "") {
        that.pwMessage = "请输入密码";
        //console.log(that.password)
        return;
      }
      post("api/idatamanage/system/login", params)
        .then((res)=> {
          if (res.data.code == "SUCCESS") {
            this.$router.push({ path: "/" });
            sessionStorage.setItem("Authorization", res.data.authorization);
          } else if (res.data.code == "PARAM_ERROR") {
            that.pwMessage = "输入账户名不存在或密码错误，请重新输入";
          } else {
            that.pwMessage = res.data.message;
          }
        })
        .catch((error) => {
          console.log("error=>", error);
        })
        .finally(() => {});
    },
  },
  mounted() {},
};
</script>
  
<style>
.logincentet {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 50%;
  margin-top: -240px;
}
.login {
  width: 650px;
  height: 450px;
  background-image: linear-gradient(rgb(0, 27, 117), rgb(0, 0, 0));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header {
  height: 104px;
  margin-top: 50px;
}
.image_login {
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo {
  width: 86px;
  height: 86px;
  margin-right: 10px;
}
.title {
  font-weight: bold;
  color: #fff;
  font-size: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.login_top {
  width: 100%;
  display: flex;
}
.image_login {
  width: 196px;
  height: 196px;
}
.login_bottom {
}

.form {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.form-item {
  display: flex;
}
.userMessage {
  color: red;
  /* padding-left: 595px; */
  margin-top: -15px;
}
.passwordMessage {
  color: red;
  /* padding-left: 960px; */
  margin-top: -20px;
}
.form-item label {
  width: 80px;
  height: 35px;
  line-height: 35px;
  font-weight: 900;
  text-align: center;
  /* border: 1px solid #4b6775; */
  /* background-color: #1a2f3e; */
  position: relative;
  right: -1px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.form-item input {
  width: 260px;
  height: 35px;
  border-radius: 5px;
  border: 1px solid #4b6775;
  outline: none;
  color: grey;
  background-color: #ffffff;
  padding-left: 10px;
  font-size: 17px;
}
.form-item .user {
  color: #fff;
}
.form-item .pass {
  color: #fff;
}
.submit {
  width: 100%;
  height: 46px;
  border: none;
  outline: none;
  color: oldlace;
  background-color: #0b86a4;
  cursor: pointer;
  font-size: 30px;
  font-family: "宋体";
  border-radius: 5px;
}
.submit:hover {
  background-color: #0ca4ca;
  box-shadow: -5px -10px 50px 5px rgba(219, 217, 217, 0.5);
}
</style>